<template>
	<div class="simple" ref="root" v-show="show && null != config">
		<div class="actions">
			<div @click="show=false">关闭</div>
		</div>
		<div class="data-option">
			<div class="data-id option">
				<div class="name">数据ID：</div>
				<div class="value">{{config.id}}</div>
			</div>
			<div class="data-name option">
				<div class="name">数据名称：</div>
				<div class="value">
					<input type="text" :value="config.name"/>
				</div>
			</div>
			<div class="data-content option">
				<div class="name">数据内容：</div>
				<div class="value">{{config.data}}</div>
			</div>
			<div class="data-props option">
				<div class="name">元素属性：</div>
				<div class="value">
					<div class="wrapper">					
						<span class="prop" 
							:class="prop == config.useProp ? 'use' : ''" 
							v-for="(prop, i) in config.props"
							@click.stop="updateUseProp($event, prop, i)">
							{{prop}}
						</span>
					</div>
				</div>
			</div>
			<div class="data-routes option">
				<div class="name">元素路径：</div>
				<div class="value">
					<div class="wrapper">
						<div>
							<span class="route" 
								:class="i == config.useRoute ? 'use': ''"
								v-for="(route, i) in config.routes"
								@click.stop="updateUseRoute($event, route, i)">
								{{buildRoute(route)}}
							</span>
						</div>
					</div>
				</div>
			</div>
			<div class="data-routes option">
				<div class="name">元素范围：</div>
				<div class="value">
					<div class="wrapper">
						<div>
							<span class="route" 
								v-for="(route, i) in config.routes"
								:class="i == config.dataScope ? 'use': ''"
								@click.stop="setupDataScope($event, route, i)">
								{{buildRoute(route)}}
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="more" 
			@click.stop="openCompleteConsole($event)" v-show="false">
			more options
		</div>
		<div class="operations">
			<div class="opt" @click="saveConfig(false)">保存</div>
			<div class="opt" @click="saveConfig(true)">保存并关闭</div>
		</div>
	</div>
</template>
<script>
	import Scrape from '@service/scrape.service.js';
	import Storage from '@service/storage.service.js';
	import VueDragResize from 'vue-drag-resize';

	export default {
		name: 'SimpleConsole',
		data: function(){
			return {
				show: false,
				element: null,
				elementList:[],
				config: {}
			};

		},

		methods: {
			saveConfig: function(closeConfig){
				let self = this;
				let config = self.config;
				console.log(config);
				Storage.saveScrapeElement(config);
				self.show = !closeConfig;

			},

			openCompleteConsole: function(event) {
				let self = this;
				let menuInfo = {name: 'openConsole'};
				self.$bus.$emit('menu-event', {from: 'config', menu: menuInfo, element: self.element, config: self.config});
				self.show = false;
			
			},

			handleMenuEvt: function(evtMsg){
				let self = this;
				let menu = evtMsg.menu;
				let element = evtMsg.element;
				if('configScrapeData' != menu.name && 'simple' != menu.showType){
					self.show = false;
					return;
				}
				let config = Scrape.buildScrapeConfig(element);
				self.$set(self, 'config', config);
				self.element = element;
				self.show = true;

			},
			
			buildRoute: function(route){
				return route.tagName;
				// if(route.id){
				// 	return route.tagName + '#' + route.id;
				// }
				// if(route.classes && route.classes.length > 0){
				// 	return route.tagName + '.' + route.classes.join('.');
				// }
				// return route.tagName + '[' + route.index + ']';

			},

			updateUseProp: function(event, prop, i){
				let self = this;
				let config = self.config;
				let element = self.element;
				config.useProp = prop;
				config.data = Scrape.retrieveConfigData(element, config);
				self.$set(self, 'config', config);

			},

			updateUseRoute: function(event, route, i){
				let self = this;
				let config = self.config;
				let element = self.element;
				config.useRoute = i;
				config.data = Scrape.retrieveConfigData(element, config);
				self.$set(self, 'config', config);
				event.target.scrollIntoView({behavior: 'smooth', block: 'center', 'inline': 'center'});

			},
			
			setupDataScope: function(event, route, i){
				let self = this;
				let config = self.config;
				config.dataScope = i;
				self.$set(self, 'config', config);
				event.target.scrollIntoView({behavior: 'smooth', block: 'center', 'inline': 'center'});

			},

		},

		mounted: function(){
			let self = this;
			self.$bus.$on('show-console-type', evtMsg => {self.handleMenuEvt(evtMsg)});

		}

	
	}
</script>
<style scoped>
	.simple{
		width: 620px;
		font-size: 16px;
		padding-bottom: 15px !important;
		background: #2196f3f2 !important;
	}
	.actions {
		display: flex;
    	justify-content: right;		
	}
	.actions>div{
		margin: 0px 0px 0px 10px;
	}
	.option{
		display: flex;
		padding: 5px 0px;
		align-items: center;
	}
	.option .name{
		text-align: right;
		width: 100px;
	}
	.option .value{
		flex: 8;
		max-width: 80%;
	}
	.data-name .value{
		width: 100%;
		overflow: hidden;
	}
	.data-name .value input{
		width: 100%;
	    margin: 0px;
	    border: 0px;
	    line-height: 20px;
	    background: #2196f3;
	    color: white;
	    border-bottom: 1px solid;
	    padding: 0px 2px;		
	}
	.data-name .value input:focus-visible{
		outline: none;
	}
	.data-content .value{
		width: 320px;
		height: 100px;
		overflow: auto;
		padding: 2px 0px;
	}
	.data-routes .value {
		display: flex;
		align-items: center;
	}
	.data-routes .value .wrapper{
    	width: 100%;
    	overflow-x: scroll;
	}
	.data-routes .value .more{
		padding: 0px 5px;
	}
	.data-routes .value .wrapper div{
		width: max-content;
	}
	.data-routes .value .route{
		margin: 0px 1px;
		padding: 0px 5px;
	    min-width: 20px;
	    text-align: center;
	    text-transform: lowercase;
	}
	.data-routes .value .route.use{
		background: #ffffff59;
	}
	.data-routes .value .route:hover{
	    background: #ffffff59;
	}
	.data-props .value{
		display: flex;
    	justify-content: space-between;		
	}
	.data-props .value .prop{
		padding: 0px 5px;
	    min-width: 20px;
	    text-align: center;
	}
	.data-props .value .prop.use{
	    color: #2196f3;
		background: white;
	    text-align: center;
	}
	.more{
		padding: 5px 0px;
		text-align: center;
	}
	.operations{
	    display: flex;
	    justify-content: center;
	    padding-top: 15px;
	}
	.operations .opt{
		padding: 0px 15px;
	}

</style>